<template>
  <div
    class="theme_color"
    v-for="(item, inx) in colors"
    :key="item"
    :style="{ backgroundColor: item }"
    @click="handleToggle(item, inx)"
  >
    <CheckOutlined v-if="sChecked === inx" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance, computed } from "vue";
import { CheckOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "ColorCheckbox",
  props: {
    colors: {
      type: Array,
      required: true,
    },
  },
  components: { CheckOutlined },
  setup(props) {
    const proxy = getCurrentInstance()?.proxy;
    const { commit, getters } = useStore();
    const selectedPalette = getters.setting.selectedPalette;
    const sChecked = ref(-1);

    if (proxy?.$utils.$isTrue(selectedPalette)) {
      sChecked.value = Number(selectedPalette)
    }
    
    const handleToggle = (item: string, inx: number): void => {
      sChecked.value = inx;
      commit("SET_PALETTE", String(inx));
      commit("CHANGE_THEME", { inx: String(inx), flag: "isChange" });
    };

    return {
      sChecked,
      handleToggle,
    };
  },
});
</script>

<style lang="scss" scoped>
.theme_color {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 8px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
</style>